<template>
	<view>
		<view class="body" >
			<view class="consultation">
				<view class="head">
					<image src="https://cdn3.axureshop.com/demo/1989398/images/%E6%88%91%E7%9A%84_1/u758.svg" mode=""></image>
					<text>花花-花卉师</text>
				</view>
				<button class="btn" @click="consultation">在线咨询</button>
			</view>
			<view v-for="w in articlelist" v-if="titleid==w.articleId">
				<view class="title">
					<text>{{w.title}}</text>
				</view>
				<view class="deta">
					<text>作者：{{w.nickname}}</text>
					<text>{{w.updateTime}}</text>
				</view>
				<view class="detail">
					<view class="summary">
						<text>摘要</text>
						<text>{{w.summary}}</text>
						<image :src="w.imgData" mode=""></image>
					</view>
					<view class="steps">
						<text>{{w.content}}</text>
						<!-- <image src="https://s2.loli.net/2023/01/04/lFmSXtDzjZ2JUTB.jpg"></image> -->
					</view>
					<view class="comments" >
						<view class="commentitle">
							<text>妙语连珠</text>
						</view>
						<view class="line">
							<view class="lines">
								
							</view>
						</view>
						<view v-for="(v,i) in list">
							<MsgBox :data="v" @onHit="v.hits++"></MsgBox>
							<!-- <view >
								<view class="comdetail">
									<view class="comhead">
										<image :src="imageUrl+v.avatarPath"></image>
										<view >
											<text>{{v.nickName}}</text>
											<text>{{v.msgTime}}</text>
										</view>
									</view>
									<view class="icon">
										<view @click="changeheart(v.msgId,v.hits)">
											<uni-icons v-if="sta==0" type="heart" size="30" ></uni-icons>
											<uni-icons v-else type="heart-filled" size="30" ></uni-icons>
										</view>
										<text>{{otherhits}}</text>
									</view>
								</view>
							</view>
							<view class="content">
								<text>{{v.msgCont}}</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			</view>
			<view class="commen">
				<view class="inp">
					<input type="text" placeholder="说点什么···" v-model="message"  @confirm="addmsg">
					<uni-icons type="chat" size="30"></uni-icons>
				</view>
				<!-- 收藏 -->
				<!-- <view @click="changstart">
					<uni-icons v-if="state==0" type="star" size="30"></uni-icons>
					<uni-icons v-else type="star-filled" size="30"></uni-icons>
				</view> -->
				<button open-type="share" class="share"><uni-icons type="redo" size="30"></uni-icons></button>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../utils/http.js"
	export default {
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '养花小知识',
		      path: '/pages/referral/referral'
		    }
		},
		data() {
			return {
				titleid:'',
				sta:0,
				state:0,
				page:1,
				pageSize:5,
				message:'',
				time:'',
				imageUrl:"http://mnxc.xyz:8080/common/download?name=",
				list:[
					
				],
				articlelist:[
					
				],
				userId:'',
				otherhits:0,
				hitlist:[]
			}
		},
		methods: {
			getarticle(){
				http({
					url:`/article/page`,
					params:{
						pageSize:this.pageSize,
						page:this.page
					},
					success:(res)=>{
						// console.log(res.data.data);
						this.articlelist=res.data.data.records;
						// console.log(this.alist);
					}
				})
			},
			addmsg: function(event) {
				if(this.userId == ''){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					this.message = '';
				}
				else{
					this.message = event.target.value
					this.time = this.getTime();
				// console.log(event.target.value)
					http({
						url:`/message`,
						method:'post',
						data:{
							msgCont:this.message,
							articleId:this.titleid,
							userId:this.userId,
							msgTime:this.time
						},
						success:(res)=>{
							console.log(res.data.data);
							this.message = '';
							this.getcomen();
							// console.log(this.alist);
						}
					})
				}
			},
			getcomen(){
				http({
					url:`/message/msgPlusByArticleId`,
					params:{
						id:this.titleid
					},
					success:(res)=>{
						// console.log(res.data.data);
						this.list=res.data.data;
						// console.log(this.alist);
					}
				})
			},
			// 点赞
			changeheart:function(id,hits){
				if(this.userId == ''){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				}else{
					this.otherhits=hits
					http({
						url:`/message/upHitsById/`+id,
						method:'put',
						data:{
							
						},
						success:(res)=>{
							console.log(res.data.data);
							if(this.sta == 0 && res.data.data=='点击成功'){
								this.sta = 1
								this.otherhits++;
							} else {
								this.sta=0;
								this.otherhits--;
							}
						}
					})
				}
				
			},
			changstart(){
				if(this.state == 0){
				        this.state = 1
				} else {
				 this.state=0
				}
			},
			getTime:function(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day+ ' ' + hour + ':' + minute + ':' + second;
				return timer;
			},
			consultation(){
				uni.navigateTo({
					url:'/pages/index/consultation'
				})
			}

		},
		onShow() {
			this.userId=uni.getStorageSync('userId');
			this.titleid=uni.getStorageSync('titleid');
			this.getcomen();
			this.getarticle();
		}
	}
</script>

<style>
	.body{
		padding: 0 30rpx;
	}
	.consultation{
		/* position: fixed; */
		width: 690rpx;
		height: 140rpx;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	.head{
		display: flex;
		height: 140rpx;
		align-items: center;
	}
	.head image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.head text{
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	.btn{
		width: 200rpx;
		height: 60rpx;
		font-size: 30rpx;
		line-height: 60rpx;
		margin-right: 0
	}
	.title{
		font-size: 40rpx;
		font-weight: bold;
	}
	.deta{
		width: 690rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.deta text{
		font-size: 25rpx;
		color: #d1d1d1;
	}
	.detail{
		margin-top: 20rpx;
		width: 690rpx;
	}
	.summary{
		
	}
	.summary text:first-child{
		color: #41c21c;
		font-weight: bold;
	}
	.summary text:nth-child(2){
		word-break:normal;
		white-space: normal;
		color: #747474;
		margin-left: 32rpx;
	}
	.summary image{
		width: 100%;
		height: 300rpx;
		margin-top: 40rpx;
	}
	.steps{
		margin-top: 40rpx;
	}
	.steps text:first-child{
		display: block;
		margin-bottom: 40rpx;
	}
	.steps image{
		width: 100%;
		height: 300rpx;
		margin-top: 30rpx;
	}
	.comments{
		/* position: fixed; */
		width: 690rpx;
		border-top: 10rpx solid #a0a0a0;
		padding-bottom: 150rpx;
	}
	.commentitle{
		text-align: center;
	}
	,.commentitle text{
		
	}
	.line{
		margin-top: 5rpx;
		width: 690rpx;
		height: 4rpx;
		display: flex;
		align-items: center;//垂直居中
		justify-content: center;//水平居中
		
	}
	.line .lines{
		width: 64rpx;
		border-bottom: 10rpx solid #41c21c;
		border-radius: 10rpx;
	}
	.comdetail{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.comhead{
		display: flex;
		height: 140rpx;
		align-items: center;
	}
	.comhead image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.comhead text:nth-child(1){
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		display: block;
	}
	.comhead text:nth-child(2){
		padding-left: 20rpx;
		font-size: 20rpx;color: #c5c5c5;
	}
	.icon{
		display: flex;
		height: 140rpx;
		align-items: center;
	}
	.content{
		margin-left: 80rpx;
		margin-top: -20rpx;
		font-size: 25rpx;
		color: #c9c9c9;
	}
	.commen{
		width:120%;
		height: 80rpx;
		margin-left: -30rpx;
		/* margin-right: -30rpx; */
		border-top: 8rpx solid #949494;
		position: fixed;
		bottom: 0;
		background-color: aliceblue;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.commen .inp{
		display: flex;
		margin-left: 30rpx;
	}
	input{
		width: 240rpx;
		height: 60rpx;
		margin-left: 30rpx;
		padding-left: 20rpx;
		border: 2rpx solid #c7dfee;
		border-radius: 15rpx;
		background-color: #bbb6b4;
		font-size: 16px;
	}
	input::-webkit-input-placeholder {
	    color: #aab2bd;
	   
	}
	.share{
		width:120rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: aliceblue;
		margin-right: 150rpx;
	}
</style>
